<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/headAndFoot.css" />
		<script src="lib/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script src="lib/vue.js"></script>
		<title></title>
	</head>
	<body>
		
			<div id="head">
				<div id="headBox">
					<div id="headTop">
						<ul id="topLeft">
							<li><a href="#">首页</a></li>
							<li><a href="#">华为官网</a></li>
							<li><a href="#">荣耀官网</a></li>
							<li><a href="#">花粉俱乐部</a></li>
							<li><a href="#">帮助中心</a></li>
							<li><a href="#">V 码 (优购码)</a></li>
							<li><a href="#">首企业购页</a></li>
							<li><a href="#">Select Region</a></li>
							<li id="qrcode"><a href="#">下载 APP<span class="caret"></span></a>
								<div >
									<img src="img/zxy/headAndFoot/qrcode.png"/>
									<p>扫一扫，下载客户端</p>
								</div>
							</li>
							<li id="more"><a href="#">更多精彩<span class="caret"></span></a>
								<ul >
									<div><a href="#">EMUI</a></div>
									<div><a href="#">应用市场</a></div>
									<div><a href="#">华为终端云空间</a></div>
									<div><a href="#">开发者联盟</a></div>
								</ul>
						   </li>
						</ul>
						<ul id="topRight">
							<li>
								<div id="loged" v-if="ifLogin">
									<a href="#">userName</a>
								</div>
								<div id="unlogin" v-else>
									<a href="#">请登录</a>
									<a href="#">注册</a>
								</div>
							</li>
							<li id="myOrder">
								<a href="#">我的订单</a>
							</li>
							<li id="cartShop">
								<a href="#">
									<span></span>
									购物车(<font id="cartShopNum">0</font>)
								</a>
								<div v-if="ifEmpty">
									<img src="img/zxy/headAndFoot/空购物车.png" width="100px" height="100px"/>
									<p>您的购物车是空的，赶紧选购吧~</p>
								</div>
								<div v-else>
									<ul>
										<li></li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div id="header">
						<div class="left">
							<a href="#"><img src="img/zxy/headAndFoot/logo.png" /></a>
							<ul>
								<li><a href="#">华为专区</a></li>
								<li><a href="#">荣耀专区</a></li>
								<li><a href="#">HUAWEI P20</a></li>
								<li><a href="#">荣耀 10</a></li>
								<li><a href="#">nova 3i</a></li>
								<li><a href="#">荣耀 V10</a></li>
							</ul>
						</div>
						<div class="right">
							<div class="input-group">
							  <input type="text" class="form-control" placeholder="荣耀 Note10" aria-describedby="sizing-addon3">
							  <span class="input-group-btn">
					          	<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
					          </span>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<script>
			function closeAdv(){
				$("#topAdv").css("display","none");
			}
			
			var head=new Vue({
				el:"#headTop",
				data:{
					ifLogin:false,
					ifEmpty:true,
				}
			});
		</script>
	</body>
</html>